<template>
  <div>
    <el-table :data="list">
      <el-table-column prop="id" label="订单号" />
      <el-table-column prop="userId" label="用户ID" />
      <el-table-column prop="totalAmount" label="总金额" />
      <el-table-column label="操作">
        <template v-slot="scope">
          <el-button @click="deleteOrder(scope.row.id)" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination v-model:current-page="page" v-model:page-size="size" :page-sizes="[10, 20, 50, 100]"
      :background="true" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="getList"
      @current-change="getList" />
  </div>
</template>

<script lang="ts" setup>
import {ref, onMounted} from 'vue';
import {getOrderListApi, deleteOrderApi} from '@/api/order';
import type {OrderSingleDto} from '@/dtos/order.dto';

const list = ref<OrderSingleDto[]>([]);
const total = ref(0);
const page = ref(1);
const size = ref(10);

const getList = async () => {
  const res = await getOrderListApi({page: page.value, size: size.value});
  list.value = res.list;
  total.value = res.total;
};

const deleteOrder = async (id: string) => {
  await deleteOrderApi(id);
  getList();
};

onMounted(() => {
  getList();
});
</script>

<style lang="scss" scoped></style>